<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">  
	<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
	<script src="js/cufon-yui.js" type="text/javascript"></script>
	<script src="js/cufon-replace.js" type="text/javascript"></script>
	<script src="js/PT_Sans_400.font.js" type="text/javascript"></script>
	<script src="js/PT_Sans_italic_400.font.js" type="text/javascript"></script> 
	<script src="js/Satisfy_400.font.js" type="text/javascript"></script>
	<script src="js/NewsGoth_400.font.js" type="text/javascript"></script>
	<script src="js/FF-cash.js" type="text/javascript"></script> 
	<script src="js/script.js" type="text/javascript"></script>	 
	<script src="js/easyTooltip.js" type="text/javascript"></script>
	<script src="js/jquery.galleriffic.js" type="text/javascript"></script>
	<script src="js/jquery.opacityrollover.js" type="text/javascript"></script> 
	<!--[if lt IE 7]>
	<div style=' clear: both; text-align:center; position: relative;'>
		<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
			<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
		</a>
	</div>
	<![endif]-->
	<!--[if lt IE 9]>
   		<script type="text/javascript" src="js/html5.js"></script>
	<![endif]-->
</head>
<body id="page3">
	<div class="extra">
<!--==============================header=================================-->
		<header>
			<div class="menu-row">
				<div class="main">
					<div class="container_12">
						<div class="grid_12">
							<nav class="fleft">
								<ul class="services-menu">
									<li class="m1"><a href="index.html"></a></li>
									<li class="m2"><a href="contacts.html"></a></li>
									<li class="m3"><a href="#"></a></li>
								</ul>
							</nav>
							<nav class="fright">
								<ul class="main-menu">
									<li><a href="index.html">Main</a></li>
									<li><a href="about.html">About</a></li>
									<li class="active"><a href="gallery.html">Gallery</a></li>
									<li><a href="services.html">Services</a></li>
									<li><a href="contacts.html">Contacts</a></li>
								</ul>
							</nav>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="header-row"><div class="ic">More Website Templates @ TemplateMonster.com - November 07, 2011!</div>
				<div class="main">
					<h1 class="p0">
						<a href="index.html">BeautyCenter</a>
						<em>Keep Your Perfect Look</em>
					</h1>					
				</div>
			</div>
		</header>
		
<!--==============================content================================-->
		<section id="content">
			<div class="bg">
				<div class="main">
					<div id="gallery" class="content">
					   <div class="wrapper">
						   <div class="slideshow-container">
								<div id="slideshow" class="slideshow"></div>
							</div>
						</div>
					</div>
					<div id="thumbs" class="navigation">
						<h3>Gallery</h3>
						<ul class="thumbs noscript">
							<li>
								<a class="thumb" href="images/slider-img1.jpg" title=""> <img src="images/page3-img1.jpg" alt="" /><span></span> </a>
							</li> 
							<li>
								<a class="thumb" href="images/slider-img2.jpg" title=""> <img src="images/page1-img1.jpg" alt="" /> <span></span></a>
							</li> 
							<li>
								<a class="thumb" href="images/slider-img4.jpg" title=""> <img src="images/page2-img1.jpg" alt="" /> <span></span></a>
							</li> 
							<li class="last">
								<a class="thumb" href="images/slider-img3.jpg" title=""> <img src="images/page2-img2.jpg" alt="" /> <span></span></a>
							</li>
							<li>
								<a class="thumb" href="images/slider-img4.jpg" title=""> <img src="images/page2-img1.jpg" alt="" /> <span></span></a>
							</li> 
							<li>
								<a class="thumb" href="images/slider-img3.jpg" title=""> <img src="images/page2-img2.jpg" alt="" /> <span></span></a>
							</li>
							<li>
								<a class="thumb" href="images/slider-img1.jpg" title=""> <img src="images/page3-img1.jpg" alt="" /><span></span> </a>
							</li> 
							<li class="last">
								<a class="thumb" href="images/slider-img2.jpg" title=""> <img src="images/page1-img1.jpg" alt="" /> <span></span></a>
							</li>  
							<li>
								<a class="thumb" href="images/slider-img1.jpg" title=""> <img src="images/page3-img1.jpg" alt="" /><span></span> </a>
							</li> 
							<li>
								<a class="thumb" href="images/slider-img2.jpg" title=""> <img src="images/page1-img1.jpg" alt="" /> <span></span></a>
							</li> 
							<li>
								<a class="thumb" href="images/slider-img4.jpg" title=""> <img src="images/page2-img1.jpg" alt="" /> <span></span></a>
							</li> 
							<li class="last">
								<a class="thumb" href="images/slider-img3.jpg" title=""> <img src="images/page2-img2.jpg" alt="" /> <span></span></a>
							</li>  
							<li class="last2">
								<a class="thumb" href="images/slider-img4.jpg" title=""> <img src="images/page2-img1.jpg" alt="" /> <span></span></a>
							</li> 
							<li class="last2">
								<a class="thumb" href="images/slider-img3.jpg" title=""> <img src="images/page2-img2.jpg" alt="" /> <span></span></a>
							</li>
							<li class="last2">
								<a class="thumb" href="images/slider-img1.jpg" title=""> <img src="images/page3-img1.jpg" alt="" /><span></span> </a>
							</li> 
							<li class="last last2">
								<a class="thumb" href="images/slider-img2.jpg" title=""> <img src="images/page1-img1.jpg" alt="" /> <span></span></a>
							</li>	   
						</ul>
					</div>
				</div>
			</div>
			<div class="block"></div>
		</section>
	</div>
	
<!--==============================footer=================================-->
	<footer>
		<div class="footer-bg">
			<div class="main">
				<div class="container_12">
					<div class="wrapper">
						<div class="grid_12">
							<div class="wrapper">
								<span class="footer-text">Beauty Center &copy; 2011 Website Template by <a href="http://www.templatemonster.com/" target="_blank" rel="nofollow">www.templatemonster.com</a></span>
								<ul class="list-services">
									<li>Follow Us:</li>
									<li class="item-1"><a class="tooltips" title="facebook" href="#"></a></li>
									<li class="item-2"><a class="tooltips" title="twitter" href="#"></a></li>
									<li class="item-3"><a class="tooltips" title="picasa" href="#"></a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<script type="text/javascript"> Cufon.now(); </script>
	<script type="text/javascript">
			$(window).load(function() {
			// We only want these styles applied when javascript is enabled
			$('div.navigation').css({'width' : '940px'});
			$('div.content').css('display', 'block');
	
			// Initially set opacity on thumbs and add
			// additional styling for hover effect on thumbs
			var onMouseOutOpacity = 0.5;
			$('#thumbs ul.thumbs li span').opacityrollover({
				mouseOutOpacity:   onMouseOutOpacity,
				mouseOverOpacity:  0.0,
				fadeSpeed:		 'fast',
				exemptionSelector: '.selected'
			});
			
			// Initialize Advanced Galleriffic Gallery
			var gallery = $('#thumbs').galleriffic({
				delay:					 7000,
				numThumbs:				 12,
				preloadAhead:			  6,
				enableTopPager:			false,
				enableBottomPager:		 false,
				imageContainerSel:		 '#slideshow',
				controlsContainerSel:	  '',
				captionContainerSel:	   '',
				loadingContainerSel:	   '',
				renderSSControls:		  true,
				renderNavControls:		 true,
				playLinkText:			  'Play Slideshow',
				pauseLinkText:			 'Pause Slideshow',
				prevLinkText:			  'Prev',
				nextLinkText:			  'Next',
				nextPageLinkText:		  'Next',
				prevPageLinkText:		  'Prev',
				enableHistory:			 true,
				autoStart:				 7000,
				syncTransitions:		   true,
				defaultTransitionDuration: 900,
				onSlideChange:			 function(prevIndex, nextIndex) {
					// 'this' refers to the gallery, which is an extension of $('#thumbs')
					this.find('ul.thumbs li span')
						.css({opacity:0.5})
				},
				onPageTransitionOut:	   function(callback) {
					this.find('ul.thumbs li span').css({display:'block'});
				},
				onPageTransitionIn:		function() {
					this.find('ul.thumbs li span').css({display:'none'});
				}
			});
		});
	</script>
</body>
</html>
